import React, { Component } from 'react';
import { connect, } from 'react-redux';
import { Link } from 'react-router-dom';
import request from '../api/request'
import { getImgUrl } from '../utils/utils'

class GoodsList extends Component {
    constructor(props) {
        super(props)
        this.state = {
            list: [],
        }
    }

    componentDidMount() {
        this.getGoods()
    }

    getGoods() {
        request.getGoods({ pageIndex: 1, pageSize: 99999999999 }).then(res => {
            console.log(res)
            this.setState({
                list: res.data
            })
        })
    }

    renderCard() {
        const { list } = this.state;
        return list.map((item, index) => {
            return (
                <Link to={`/questions/exchange?id=${item.id}`} className="goods" key={index}>
                    <div className="goods-pic">
                        <img className="" src={getImgUrl(item.describePic)} alt="" />
                    </div>
                    <p className="goods-title">{item.title}</p>
                    {/* <p className="goods-describe">{item.describe}</p> */}
                    <p className="goods-price">所需积分：{item.price}</p>
                    <div className="sh-btn">兑换</div>
                </Link>
            )
        })
    }

    render() {
        const { list } = this.state
        console.log(list)
        return (
            <div className="list">
                <img className="goodsList-title" src={require('../static/image/questions-bg.png')} alt="" />
                <div className="goodsList">
                    {this.renderCard()}
                </div>
            </div>
        );
    }
}

export default connect(({ user, code, gameInfo }) => ({ user, code, gameInfo }))(GoodsList);
